import React, { useEffect } from 'react'
import { connect } from 'umi';
import { NavBar, DotLoading } from 'antd-mobile'

function Cinema(props: any) {
  console.log(props);
  useEffect(() => {
    if (!props.list.length) {
      props.dispatch({
        type: 'cinema/getList',
        payload: {
          cityId: props.cityId
        }
      })
    } else {
      console.log('缓存');
    }
  }, [])
  const goback = () => {
    history.go(-1)
  }
  return (
    <div>
      <NavBar className='bgc' onBack={goback}>当前城市:{props.cityName}</NavBar>
      <h1>CinemaCinemaCinema</h1>
      {
        props.loading ? <DotLoading /> :
          <ul>
            {
              props.list.map((items: any) => {
                return <li key={items.cinemaId}>{items.name}</li>
              })
            }
          </ul>
      }

    </div>
  )
}
export default connect((state: any) => {
  console.log(state);
  //city,cinema是models中的namespace决定的
  return {
    cityName: state.city.cityName,
    cityId: state.city.cityId,
    list: state.cinema.list,
    loading: state.loading.global
  }

})(Cinema)
